<template>
  <div class="popupArea publicZIndexPopupArea" v-show="popupAreaVisible">
    <div class="shade" v-tap="{ methods: closePopupModule }"></div>
    <giftModule v-if="giftModuleKey === popupModuleKey" ref="giftModule" />
    <danmuModule v-if="danmuModuleKey === popupModuleKey" ref="danmuModule" />
    <bapinModule v-if="bapinModuleKey === popupModuleKey" ref="bapinModule" />
    <photoModule v-if="photoModuleKey === popupModuleKey" ref="photoModule" />
    <rechargeModule v-if="rechargeModuleKey === popupModuleKey" ref="rechargeModule" />
    <qrcodeModule v-if="qrcodeModuleKey === popupModuleKey" ref="qrcodeModule" />
    <editInfoModule v-if="editInfoModuleKey === popupModuleKey" ref="editInfoModule" />
    <superDanmuModule v-if="superDanmuModuleKey === popupModuleKey" ref="superDanmuModule" />
    <hbkdModule v-if="hbkdModuleKey === popupModuleKey" ref="hbkdModule" />
    <chooseSongModule v-if="chooseSongModuleKey === popupModuleKey" ref="chooseSongModule" />
    <sendHbModule v-if="sendHbModuleKey === popupModuleKey" ref="sendHbModule" />
    <chooseSingerModule v-if="chooseSingerModuleKey === popupModuleKey" ref="chooseSingerModule" />
    <tipModule v-if="tipModuleKey === popupModuleKey" ref="tipModule" />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import giftModule from '@/components/popupModule2/gift.vue';
import bapinModule from '@/components/popupModule2/bapin.vue';
import danmuModule from '@/components/popupModule2/danmu.vue';
import photoModule from '@/components/popupModule2/photo.vue';
import rechargeModule from '@/components/popupModule/recharge.vue';
import qrcodeModule from '@/components/popupModule/qrcode.vue';
import editInfoModule from '@/components/popupModule2/editInfo.vue';
import superDanmuModule from '@/components/popupModule2/superDanmu.vue';
import hbkdModule from '@/components/popupModule2/hbkd.vue';
import chooseSongModule from '@/components/popupModule2/chooseSong.vue';
import sendHbModule from '@/components/popupModule2/sendHb.vue';
import chooseSingerModule from '@/components/popupModule2/chooseSinger.vue';
import tipModule from '@/components/popupModule2/tip.vue';
import { POPUP_MODULE } from '@/assets/constant/index';
import { timeoutTask } from '@/utils/index';

let lock = false;
export default {
  name: 'myPopup',
  computed: {
    ...mapState({
      popupAreaVisible: (state) => state.app.popupAreaVisible,
      popupModuleKey: (state) => state.app.popupModuleKey,
    }),
  },
  components: {
    giftModule,
    bapinModule,
    danmuModule,
    photoModule,
    rechargeModule,
    qrcodeModule,
    editInfoModule,
    superDanmuModule,
    hbkdModule,
    chooseSongModule,
    sendHbModule,
    chooseSingerModule,
    tipModule,
  },
  data() {
    return {
      giftModuleKey: POPUP_MODULE.giftModule.key,
      bapinModuleKey: POPUP_MODULE.bapinModule.key,
      danmuModuleKey: POPUP_MODULE.danmuModule.key,
      photoModuleKey: POPUP_MODULE.photoModule.key,
      rechargeModuleKey: POPUP_MODULE.rechargeModule.key,
      qrcodeModuleKey: POPUP_MODULE.qrcodeModule.key,
      editInfoModuleKey: POPUP_MODULE.editInfoModule.key,
      superDanmuModuleKey: POPUP_MODULE.superDanmuModule.key,
      hbkdModuleKey: POPUP_MODULE.hbkdModule.key,
      chooseSongModuleKey: POPUP_MODULE.chooseSongModule.key,
      sendHbModuleKey: POPUP_MODULE.sendHbModule.key,
      chooseSingerModuleKey: POPUP_MODULE.chooseSingerModule.key,
      tipModuleKey: POPUP_MODULE.tipModule.key,
    };
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
    }),
    closePopupModule() {
      if (!lock) {
        lock = true;
        console.log('***closePopupModule***');
        console.log(this.popupModuleKey);
        switch (this.popupModuleKey) {
          case this.giftModuleKey:
            this.$refs.giftModule.hideAniStart();
            break;
          case this.bapinModuleKey:
            this.$refs.bapinModule.hideAniStart();
            break;
          case this.danmuModuleKey:
            this.$refs.danmuModule.hideAniStart();
            break;
          case this.photoModuleKey:
            this.$refs.photoModule.hideAniStart();
            break;
          case this.rechargeModuleKey:
            this.$refs.rechargeModule.hideAniStart();
            break;
          case this.qrcodeModuleKey:
            this.$refs.qrcodeModule.hideAniStart();
            break;
          case this.editInfoModuleKey:
            this.$refs.editInfoModule.hideAniStart();
            break;
          case this.superDanmuModuleKey:
            this.$refs.superDanmuModule.hideAniStart();
            break;
          case this.hbkdModuleKey:
            this.$refs.hbkdModule.hideAniStart();
            break;
          case this.chooseSongModuleKey:
            this.$refs.chooseSongModule.hideAniStart();
            break;
          case this.sendHbModuleKey:
            this.$refs.sendHbModule.hideAniStart();
            break;
          case this.chooseSingerModuleKey:
            this.$refs.chooseSingerModule.hideAniStart();
            break;
          case this.tipModuleKey:
            this.$refs.tipModule.hideAniStart();
            break;
          default:
            console.log('switch参数异常!');
        }
        timeoutTask(() => {
          this.togglePopup();
          timeoutTask(() => {
            lock = false;
          }, 200);
        }, 200);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.popupArea {
  position: absolute;
  width: 100%;
  height: 100%;
  .shade {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
</style>
